<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 子组件要和父级组件进行沟通 -->
        <!-- 自定义事件：父级组件像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件 -->
        <blog-post1 @enlarge-text1 = "fontSize1 += 2"></blog-post1>
        {{ fontSize1 }}

        <!-- 通过 $event 访问到被抛出的这个值 -->
        <blog-post2 @enlarge-text2 = "fontSize2 += $event"></blog-post2>
        {{ fontSize2 }}

        <!-- 如果事件处理函数是一个方法: -->
        <blog-post2 @enlarge-text2 = "changeFont"></blog-post2>
        {{ fontSize2 }}
    </div>

    <script>
        Vue.component('blog-post1', {
            // 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件
            template: `<button @click="$emit('enlarge-text1')">Enlarge1</button>`
        })

        Vue.component('blog-post2', {
            // 使用事件抛出一个值，使用 $emit 的第二个参数来提供这个值
            template: `<button @click="$emit('enlarge-text2', 3)">Enlarge2</button>`
        })


        var vm = new Vue({
            el: "#app",
            data: {
                fontSize1: 1,
                fontSize2: 1,
            },
            methods: {
                // 子组件抛出的值将会作为第一个参数传入这个方法：
                changeFont: function (e) {
                    this.fontSize2 += e
                }
            }
        })
        
    </script>
</body>

</html>